<template>
	<!-- 我的 参展剧本等页面需要的多数字模块 -->
	<view class="u-flex u-col-top">
		<view class="u-flex-1 u-flex u-flex-col" 
			:class="[{'u-position-relative right-count-content':index!=0},{'u-col-top':isFirstLeft&&index===0}]" 
			v-for="(item,index) in list" :key="index" @click="click(item)">
			<view class="u-inline-flex u-flex-col u-position-relative">
				<image-number :number="item.count"></image-number>
				<view class="notice" v-if="showRedNotice(item)"></view>
				<view class="text-order-time u-text-center u-flex" :class="fontClass">
					<view>
						<view v-for="(c,i) in translateTxt(item)" :key="i" style="line-height: 24rpx;" class="u-font-20">{{c}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import imageNumber from '@/components/imageNumber/imageNumber.vue'
	export default {
		components: {
			imageNumber
		},
		name:"itemNumberList",
		props: {
			list: {
				type: Array,
				default: ()=>([])
			},
			size:{
				type:[String,Number],
				default:24
			},
			//第一个是否靠左
			isFirstLeft:{
				type:Boolean,
				default:false
			}
		},
		computed: {
			fontClass() {
				return `u-font-${this.size}`
			},
			
		},
		data() {
			return {
				
			};
		},
		methods: {
			//返回文字（有两行的情况下需要转换）
			translateTxt(item){
				return item.text ? item.text.split('|') : []
			},
			click(item){
				this.itemClick(item);
				this.$emit('itemClick',item)
			},
			// 根据当前类型返回是否显示
			showRedNotice(item){
				if(item.noticeType){
					const typeList = item.noticeType.split(',');
					return typeList.some(val=>this.redNotif[val])
				}
			}
		},
	}
</script>

<style lang="scss" scoped>

.right-count-content{
	&::after{
		content: "";
		position: absolute;
		width: 1rpx;
		height: 44rpx;
		background-color: rgba(26, 26, 26, 0.15);
		left: 0;
		top: 20%;
	}
}
.text-order-time{
	height: 60rpx;
}

</style>
